<template>
  <div class="single-fix">
    <el-upload
      v-if="editMode!='detail'"
      :multiple="false"
      :action="actionUrlP"
      :headers="headers"
      :on-success="onSuccess"
      :before-upload="onBeforeUpload"
      :on-change="handleOnChange"
      :show-file-list="false"
      :on-progress="onProgress"
      :disabled="loading"
    >
      <el-button :loading="loading" icon="el-icon-upload" type="primary">点击上传</el-button>
      <span class="tipLabel">{{ tipLabel }}</span>
    </el-upload>
    <div class="el-upload__tip">
      <el-progress
        v-if="loading"
        :percentage="percentage"
        status="success"
        class="w-200"
      ></el-progress>
      <div>
        <div
          style="color: #409eff"
          :key="index"
          v-for="(item,index) in fileList">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
          <i class="el-icon-download download" @click="onDownload(item)"></i>
          <i v-if="editMode!='detail'" class="el-icon-error close" @click="onRemove(index)"></i>
        </div>
      </div>
      <slot name="tip"></slot>
    </div>
  </div>

</template>

<script>
import { getToken } from "@/utils/auth";
import { basePath } from "@/utils/request";
import { shot } from "@/api/serve/media-file";
import Download from "@/views/_mixins/download";
export default {
  name: "CFileUpload",
  mixins: [Download],
  props: {
    actionUrl: {
      type: String,
      default: "",
    },
    beforeUpload: {
      type: Function,
      default: () => {},
    },
    tipLabel: {
      type: String,
      default: "",
    },
    editMode: {
      type: String,
      default: 'edit',
    },
    value: {
      type: Array,
      default: () => [],
    }
  },
  computed: {
    actionUrlP() {
      return basePath + this.actionUrl;
    },
    headers() {
      let token = getToken();
      return token ? { Authorization: token } : {};
    },
    fileList() {
      return this.value;
    },
  },
  data() {
    return {
      loading: false,
      percentage: 0,
    };
  },
  methods: {
    onDownload(item) {
      this.downloadExportFile(item.url, item.name);
    },
    onSuccess(res, file, fileList) {
      this.value.push({
        url: res.fileUrl,
        name: res.name
      })
      this.$emit("uploadSuccess", res, file, fileList);
    },
    onBeforeUpload(file) {
      const valid = this.beforeUpload(file);
      if (valid === false) {
        this.loading = false;
        this.percentage = 0;
        return false;
      }
    },
    onRemove(index) {
      this.value.splice(index, 1)
      this.$emit("remove");
    },
    handleOnChange(file, fileList) {
      this.loading = true;
      if (file.percentage == 100) {
        this.loading = false;
        this.percentage = 0;
      }
    },
    onProgress(file) {
      this.percentage = file.percent;
    },
  },
};
</script>
<style lang="scss" scoped>
.close {
  font-size: 16px;
  color: red;
  cursor: pointer;
  margin-left: 16px;
}
.download{
  font-size: 16px;
  color: #409EFF;
  cursor: pointer;
  margin-left: 26px;
}
.w-200 {
  max-width: 200px;
}
.tipLabel{
  color: #C0C4CC;
  font-size: 12px;
  margin-left: 20px;
}

.single-fix {
  .el-upload__tip {
    margin: unset;
  }
}
</style>
